<template>
  <div class="form-children">
    kong空白练习
    <input type="text" placeholder="" />
    <p>count的值为：{{ count }}</p>
    <!-- vue 提供了内置变量 $event就是 他是原生DOM的事件对象e -->
    <button type="text" @click="add">点击+1</button>
    <button type="text" @click="sub(1, $event)">点击+</button>
    <a href="https://www.baidu.com/" @click.prevent="show">跳转到百度</a>
    <div class="box" @click="box">
      <button @click.stop="btn">按钮</button>
    </div>
    <hr />
    <div>
      按键修饰符
      <input type="text" @keyup.esc="clearIput" @keyup.enter="submit" />
      <input type="text" @keyup.enter="clearIput2" />
    </div>
    <hr />
    <div>
      双向数据绑定
      <p>{{ userName }}</p>
      <input v-model.trim="userName" type="text" />
      <div><input v-model.number="n1" type="text" /> + <input v-model.number="n2" type="text" /> = {{ n1 + n2 }}</div>
    </div>
    <hr />
    <h2>条件渲染指令 v-if v-show</h2>
    <p v-if="flag">这是被v-if控制的元素</p>
    <p v-show="flag">这是被v-show控制的元素</p>
    <h2>条件渲染指令 v-else if</h2>
    <div v-if="type === 'a'">优秀</div>
    <div v-else-if="type === 'b'">良好</div>
    <div v-else-if="type === 'c'">一般</div>
    <div v-else>差</div>
    <h2>v-for</h2>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <div>
      <h2>base64图片</h2>
      <a href="https://base64.us/">base64转换链接</a>
      <h2>过滤器的使用</h2>
      <div>
        <p>message的值是：{{ message | capi }}</p>
      </div>
      <div>
        <p>当前时间是：{{ time | dateFormat }}</p>
        <p>当前时间是：{{ time2 }}</p>
        <p>当前时间是：{{ time3 }}</p>
      </div>
      <div>
        <h2>watch 监听器</h2>
        <input type="text" v-model="uName" />
        <input type="text" v-model="info.name" />
      </div>
      <h2>级联选择器 :props="{ expandTrigger: 'hover' }"</h2>
      <div>
        <span class="demonstration"> expand-trigger="hover" hover 触发子菜单</span>
        <!-- props 用来指定配置对象 -->
        <!-- options 用来指定数据源 -->
        <el-cascader
          v-model="cascaderObj"
          :options="options"
          :props="cascaderProps"
          expand-trigger="hover"
          @change="cascaderChange"
          clearable
          change-on-select
        ></el-cascader>
      </div>
    </div>
  </div>
</template>
<script>
import list from '../tagGroup/components/list.vue';
import * as dayjs from 'dayjs';
export default {
  components: { list },
  data() {
    return {
      // 把选中的值保存到数组中
      cascaderObj: [],
      // 数据源
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致',
                },
                {
                  value: 'fankui',
                  label: '反馈',
                },
                {
                  value: 'xiaolv',
                  label: '效率',
                },
                {
                  value: 'kekong',
                  label: '可控',
                },
              ],
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航',
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航',
                },
              ],
            },
          ],
        },
      ],
      // 指定配置对象
      cascaderProps: {
        // value: '',
        // label: '',
        // children: 'children',
      },
      time: new Date(),
      time2: dayjs().format('YYYY-MM-DD'), // 当前年当前月当前日
      time3: dayjs().format('YYYY-MM-DD HH:mm:ss'), // 当前年当前月当前日 时分 秒
      message: 'hello vue.js',
      property: 'value',
      count: 0,
      userName: '李思思',
      uName: '',
      info: {
        name: 'admin',
      },
      n1: 1,
      n2: 2,
      // flag 为true 显示控制的元素 为false 隐藏控制的元素
      flag: true,
      type: 'a',
      list: [
        { id: 1, name: '赵高', time: new Date() },
        { id: 2, name: '赵姬', time: new Date() },
        { id: 3, name: '李斯', time: new Date() },
        { id: 4, name: '嬴政', time: new Date() },
      ],
    };
  },
  // 监听器
  watch: {
    // 监听器本质上是一个函数，要监视那个数据变化，就把数据名作为方法名即可
    uName(newVal, oldVal) {
      // 方法格式的监听器
      console.log(newVal + '新值');
      console.log(oldVal + '旧值');
    },
    // 定义对象格式的监听器
    uName: {
      //  只要监听到了uName的变化 就会触发handler 这个函数
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      // immediate:true 代表已进入页面就触发一次  false 不触发
      immediate: true,
    },

    // info: {
    //   handler(newVal) {
    //     console.log(newVal);
    //   },
    //   // 开启深度监听，只要对象中任何一个属性发生了变化 就会触发监听器， 默认是false
    //   deep: true,
    // },
    // 如果要监听的是对象的子属性的变化，必须要加一个单引号
    'info.name'(newVal) {
      console.log(newVal);
    },
  },

  //  过滤器本质上是函数
  filters: {
    // 强调过滤器中一定要有一个返回值
    // 如果全局过滤器和私有过滤器名字冲突 一般按照就近原则调用私有过滤器
    capi(val) {
      // 注意 过滤器函数形参中的val 永远是管道符前面的值
      // 字符串有charAt方法，这个方法接受索引值，表示从字符串中把索引 对应的字符，获取出来
      // console.log(val.charAt(0)); // h
      // toUpperCase 方法把字符串转换为大写
      const firt = val.charAt(0).toUpperCase();
      const other = val.slice(1); // 从索引为1 的位置一直截取到最后  ello vue.js
      // console.log(firt);
      // console.log(other); // ello vue.js
      return firt + other;
    },
    // 时间过滤器
    dateFormat(val) {
      // 1 对时间进行格式化处理 YYYY-MM-DD HH:mm:ss
      const dtStr = dayjs(val).format('YYYY-MM-DD HH:mm:ss');
      // 2 把时间格式化的结果return出去
      return dtStr;
    },
  },
  methods: {
    //  级联选择器change
    cascaderChange() {
      console.log(this.cascaderObj);
    },
    // 删除
    delete(id) {
      // console.log(id);
      this.list = this.list.filter((item) => item.id !== id);
    },
    // 按键修饰符
    clearIput(e) {
      e.target.value = ''; // 清空文本框
      // console.log('按键修饰符');
    },
    clearIput2(e) {
      e.target.value = ''; // 清空文本框
      // console.log('按enter键修饰符');
    },
    submit() {
      // console.log('按下enter键修饰符');
    },
    // box
    box() {
      // console.log('点击了div');
    },
    // 按钮
    btn(e) {
      // 阻止事件冒泡
      // e.stopPropagation();
      console.log('点击了按钮');
    },
    show(e) {
      // 阻止默认跳转行为
      // e.target.preventDefault(); // 原生阻止默认行为
    },
    // 点击加一
    add(e) {
      this.count += 1;
      // console.log(e);
      //  // 判断 this.count 的值为偶数
      if (this.count % 2 == 0) {
        // 偶数
        e.target.style.backgroundColor = 'red';
      } else {
        // 奇数
        e.target.style.backgroundColor = '';
      }
    },
    sub(a, e) {
      this.count += a;
      // console.log(a);
      // console.log(e);
      //  // 判断 this.count 的值为偶数
      if (this.count % 2 == 0) {
        // 偶数
        e.target.style.backgroundColor = 'green';
      } else {
        // 奇数
        e.target.style.backgroundColor = '';
      }
    },

    handleClick(row) {
      // console.log(row);
    },
  },
};
</script>
<style lang="scss" scoped>
.form-children {
  width: 100%;
  height: 100%;
  background-color: #eee;
  .box {
    height: 150px;
    background-color: green;
    padding-left: 100px;
    line-height: 150px;
  }
}
</style>
